<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>技术小馆 | 专业前沿技术分享</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero {
            background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
            color: white;
        }
        .card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }
        .highlight {
            background: linear-gradient(90deg, rgba(107,115,255,0.1) 0%, rgba(0,13,255,0.05) 100%);
            border-left: 4px solid #6B73FF;
        }
        .footer {
            background: #1a1a1a;
            color: #f0f0f0;
        }
        .footer a:hover {
            color: #6B73FF;
        }
        .drop-cap::first-letter {
            float: left;
            font-size: 3.5em;
            line-height: 0.85;
            margin: 0.1em 0.1em 0 0;
            color: #6B73FF;
            font-weight: 700;
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <section class="hero min-h-screen flex items-center justify-center py-20 px-4">
        <div class="container mx-auto text-center px-4">
            <h1 class="text-5xl md:text-6xl font-bold mb-6 animate-fade-in">探索技术的无限可能</h1>
            <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-10 opacity-90">在这里，前沿技术与深度思考相遇，为您呈现最具价值的知识盛宴</p>
            <div class="flex justify-center space-x-4">
                <a href="#content" class="bg-white text-blue-600 px-8 py-3 rounded-full font-medium hover:bg-opacity-90 transition-all transform hover:scale-105 shadow-lg">开始阅读</a>
                <a href="#" class="border-2 border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition-all transform hover:scale-105">了解更多</a>
            </div>
        </div>
        <div class="absolute bottom-10 left-0 right-0 text-center">
            <a href="#content" class="inline-block animate-bounce">
                <i class="fas fa-chevron-down text-white text-2xl"></i>
            </a>
        </div>
    </section>

    <!-- Main Content -->
    <main id="content" class="py-20 px-4 max-w-6xl mx-auto">
        <!-- Intro Section -->
        <section class="mb-20">
            <div class="drop-cap text-lg md:text-xl text-gray-700 leading-relaxed mb-8">
                在这个信息爆炸的时代，技术发展日新月异。我们精心整理和筛选最有价值的技术内容，为您提供清晰、系统化的知识体系。从基础概念到前沿趋势，从实用技巧到深度思考，这里汇聚了技术领域的精华。
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="card bg-white p-8 rounded-xl">
                    <div class="text-blue-500 text-4xl mb-4">
                        <i class="fas fa-lightbulb"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">深度解析</h3>
                    <p class="text-gray-600">深入浅出的技术剖析，帮助您理解复杂概念背后的原理和逻辑。</p>
                </div>
                <div class="card bg-white p-8 rounded-xl">
                    <div class="text-blue-500 text-4xl mb-4">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">趋势洞察</h3>
                    <p class="text-gray-600">把握技术发展脉络，前瞻未来方向，助您在变革中保持领先。</p>
                </div>
                <div class="card bg-white p-8 rounded-xl">
                    <div class="text-blue-500 text-4xl mb-4">
                        <i class="fas fa-hands-helping"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">实践指南</h3>
                    <p class="text-gray-600">可落地的实用建议和最佳实践，让知识转化为实际能力。</p>
                </div>
            </div>
        </section>

        <!-- Featured Article -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-1 h-12 bg-blue-500 mr-4"></div>
                <h2 class="text-3xl font-bold">精选专题</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 items-center">
                <div>
                    <h3 class="text-2xl font-bold mb-4">现代前端架构演进</h3>
                    <p class="text-gray-600 mb-6">从传统的MVC到现代的组件化、微前端架构，前端开发范式经历了翻天覆地的变化。本文将系统梳理前端架构的发展历程，分析各阶段的优缺点，并探讨未来可能的演进方向。</p>
                    <div class="flex flex-wrap gap-2 mb-6">
                        <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">组件化</span>
                        <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">微前端</span>
                        <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">SSR</span>
                        <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">架构设计</span>
                    </div>
                    <a href="#" class="inline-flex items-center text-blue-600 font-medium hover:text-blue-800">
                        阅读全文 <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
                <div class="relative rounded-xl overflow-hidden shadow-lg">
                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="前端架构" class="w-full h-auto">
                    <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-30"></div>
                </div>
            </div>
        </section>

        <!-- Data Visualization -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-1 h-12 bg-blue-500 mr-4"></div>
                <h2 class="text-3xl font-bold">技术生态关系图</h2>
            </div>
            
            <div class="bg-white p-6 rounded-xl shadow-md">
                <div class="mermaid">
                    graph TD
                    A[前端开发] --> B[框架]
                    A --> C[构建工具]
                    A --> D[状态管理]
                    B --> E[React]
                    B --> F[Vue]
                    B --> G[Angular]
                    C --> H[Webpack]
                    C --> I[Vite]
                    C --> J[Rollup]
                    D --> K[Redux]
                    D --> L[Vuex]
                    D --> M[MobX]
                    E --> N[React Router]
                    E --> O[Next.js]
                    F --> P[Vue Router]
                    F --> Q[Nuxt.js]
                    G --> R[RxJS]
                </div>
            </div>
        </section>

        <!-- Highlight Section -->
        <section class="mb-20">
            <div class="highlight p-8 md:p-12 rounded-xl mb-12">
                <div class="max-w-4xl mx-auto text-center">
                    <i class="fas fa-quote-left text-blue-500 text-3xl mb-6 opacity-50"></i>
                    <blockquote class="text-xl md:text-2xl font-medium mb-6">
                        技术的学习不在于掌握多少工具和框架，而在于理解其背后的设计思想和原理，培养解决问题的能力。
                    </blockquote>
                    <p class="text-gray-600">—— 技术小馆核心哲学</p>
                </div>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-2xl font-bold mb-4">学习路径建议</h3>
                    <p class="text-gray-600 mb-6">我们根据多年经验总结了一套系统化的学习路径，帮助您循序渐进地掌握核心技术概念，避免碎片化学习带来的困惑。</p>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <div class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-500 text-white flex items-center justify-center mr-3 mt-1">
                                <span>1</span>
                            </div>
                            <p class="text-gray-600">夯实基础：HTML/CSS/JavaScript核心概念</p>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-500 text-white flex items-center justify-center mr-3 mt-1">
                                <span>2</span>
                            </div>
                            <p class="text-gray-600">掌握主流框架：React/Vue/Angular选其一</p>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-500 text-white flex items-center justify-center mr-3 mt-1">
                                <span>3</span>
                            </div>
                            <p class="text-gray-600">深入理解构建工具和工程化实践</p>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-500 text-white flex items-center justify-center mr-3 mt-1">
                                <span>4</span>
                            </div>
                            <p class="text-gray-600">探索架构设计和性能优化</p>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-2xl font-bold mb-4">资源推荐</h3>
                    <div class="space-y-4">
                        <div class="p-4 border border-gray-200 rounded-lg hover:border-blue-300 transition-colors">
                            <h4 class="font-medium mb-2 flex items-center">
                                <i class="fas fa-book text-blue-500 mr-2"></i> 《深入浅出前端架构》
                            </h4>
                            <p class="text-gray-600 text-sm">系统讲解前端架构设计原则和实践案例</p>
                        </div>
                        <div class="p-4 border border-gray-200 rounded-lg hover:border-blue-300 transition-colors">
                            <h4 class="font-medium mb-2 flex items-center">
                                <i class="fas fa-video text-blue-500 mr-2"></i> 「现代前端工程实践」视频课程
                            </h4>
                            <p class="text-gray-600 text-sm">从零到一构建企业级前端应用</p>
                        </div>
                        <div class="p-4 border border-gray-200 rounded-lg hover:border-blue-300 transition-colors">
                            <h4 class="font-medium mb-2 flex items-center">
                                <i class="fas fa-laptop-code text-blue-500 mr-2"></i> 前端性能优化实战工作坊
                            </h4>
                            <p class="text-gray-600 text-sm">手把手教你提升应用性能指标</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="footer py-12 px-4">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-bold mb-2">技术小馆</h3>
                    <p class="text-gray-400">专注前沿技术分享与深度思考</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="hover:text-white transition-colors">
                        <i class="fas fa-external-link-alt mr-2"></i> www.yuque.com/jtostring
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400 text-sm">
                &copy; 2023 技术小馆. 保留所有权利.
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // Simple scroll animation
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>